from dash import Dash, dcc, html
from dash.dependencies import Input,Output,State
from src.common.descriptors.user_desc_lib import UserDescribe
from src.common.utils.wraper_fig import wraper_fig
from src.core.user_persona.user_info import user_info
from src.core.user_persona.boot_time import boot_time
from src.core.usage.software_usage import software_usage_total

def register_callbacks(app):
    @app.callback(
        [
            Output('user_info','children'),
            Output(component_id='boot_time', component_property='src'),
            Output(component_id='software_usage', component_property='src')
        ],
        [Input('submit-button', 'n_clicks')],
        [State('input-id', 'value')],
        prevent_initial_call=True
    )

    def update_dashborad(n_clicks, input_id):
        if input_id is None:
            return [
                html.Div(),
                "",
                ""
                ]
        user = UserDescribe(user_id=input_id)

        return [
            user_info(user.user_info),
            wraper_fig(boot_time(user.user_logs)),
            wraper_fig(software_usage_total(user.user_softwares))
        ]

def create_layout():
    return html.Div(
        children=[
            html.Header([
                    html.H1('👤 用户画像分析', 
                           style={'color': '#2c3e50', 'marginBottom': '20px'}),
                    html.Div([
                            dcc.Input(
                                id='input-id',
                                type='text',
                                placeholder='请输入用户ID...',
                                debounce=True,
                                style={
                                    'flex': 1,
                                    'padding': '12px',
                                    'border': '2px solid #3498db',
                                    'borderRadius': '8px',
                                    'fontSize': '16px'
                                }
                            ),
                            html.Button(
                                '分析用户 🔍',
                                id='submit-button',
                                n_clicks=0,
                                style={
                                    'marginLeft': '10px',
                                    'padding': '12px 24px',
                                    'backgroundColor': '#3498db',
                                    'color': 'white',
                                    'border': 'none',
                                    'borderRadius': '8px',
                                    'cursor': 'pointer',
                                    'transition': 'all 0.3s',
                                    ':hover': {
                                        'backgroundColor': '#2980b9',
                                        'transform': 'scale(1.05)'
                                    }
                                }
                            )
                        ],
                        style={
                            'display': 'flex',
                            'maxWidth': '800px',
                            'margin': '0 auto',
                            'padding': '20px'
                        }
                    )
                ],
                style={
                    'backgroundColor': '#f8f9fa',
                    'padding': '2rem',
                    'boxShadow': '0 2px 4px rgba(0,0,0,0.1)'
                }
            ),

            html.Main([
                    html.Section([
                            html.H2('📝 用户档案',style={'color': '#34495e', 'marginBottom': '15px'}),
                            dcc.Loading(
                                id='user-info-loading',
                                type='circle',
                                children=html.Div(
                                    id='user_info',
                                    style={
                                        'padding': '20px',
                                        'backgroundColor': 'white',
                                        'borderRadius': '8px',
                                        'boxShadow': '0 2px 4px rgba(0,0,0,0.05)'
                                    }
                                )
                            )
                        ],
                        style={
                            'margin': '20px auto',
                            'maxWidth': '1200px',
                            'padding': '20px'
                        }
                    ),

                    html.Div([
                            html.Article([
                                    html.H2('⏱ 设备使用习惯', style={'color': '#34495e', 'marginBottom': '15px'}),
                                    dcc.Loading(
                                        id='boot-time-loading',
                                        type='circle',
                                        children=html.Div(
                                            html.Img(
                                                id='boot_time',
                                                style={
                                                    'maxWidth': '100%',
                                                    'height': 'auto',
                                                    'objectFit': 'contain',
                                                    'display': 'block'
                                                }
                                                ),
                                            style={
                                                'backgroundColor': 'white',
                                                'padding': '20px',
                                                'borderRadius': '8px',
                                                'boxShadow': '0 2px 4px rgba(0,0,0,0.05)',
                                                'margin': '0 auto'
                                            }
                                        )
                                    )
                                ],
                                style={'margin': '10px'}
                            ),

                            html.Article([
                                    html.H2('💻 应用使用分析', 
                                           style={'color': '#34495e', 'marginBottom': '15px'}),
                                    dcc.Loading(
                                        id='software-usage-loading',
                                        type='circle',
                                        children=html.Div(
                                            html.Img(
                                                id='software_usage',
                                                style={
                                                    'maxWidth': '100%',
                                                    'height': 'auto',
                                                    'objectFit': 'contain',
                                                    'display': 'block'
                                                }
                                                ),
                                            style={
                                                'backgroundColor': 'white',
                                                'padding': '20px',
                                                'borderRadius': '8px',
                                                'boxShadow': '0 2px 4px rgba(0,0,0,0.05)',
                                                'margin': '0 auto'
                                            }
                                        )
                                    )
                                ],
                                style={'margin': '10px'}
                            )

                            # ,
                            # html.Article()

                        ],
                        style={
                            'maxWidth': '1200px',
                            'margin': '0 auto',
                            'padding': '0 20px'
                        }
                    )
                ],
                style={'padding': '20px'}
            )
        ],
        style={
            'fontFamily': 'Segoe UI, system-ui',
            'minHeight': '100vh',
            'backgroundColor': '#ecf0f1'
        }
    )


def init_user_dash(server):
    app = Dash(
        __name__,
        server=server,
        url_base_pathname='/user/'
    )

    app.layout = create_layout()
    
    register_callbacks(app)

    return app